<template>
    <div class="screen">
      <mt-header title="职位信息" class="title" style="height:6%">
        <router-link to="/main/homePage" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button icon="more" slot="right" @click="showPopup"></mt-button>
      </mt-header>
      <div :class="{popup: popupVisible,popup_none: !popupVisible}">
        <div class="border_bottom" @click="collectJob"><span class="glyphicon glyphicon-star"></span><span>收藏</span></div>
        <div class="border_bottom" @click="complaint"><span class="glyphicon glyphicon-exclamation-sign"></span><span>投诉</span></div>
        <div style="line-height: 3rem" @click="share"><span class="glyphicon glyphicon-share"></span><span>分享</span></div>
      </div>
      <div class="littleInterval"></div>
      <div class="center">
        <div class="align_left">
          <span class="title_span">手机wifi兼职/在家可做/日结</span>
        </div>
        <div class="price_div"><span class="span_price">200</span><span class="unit">元/天</span></div>
        <div class="little"><span class="glyphicon glyphicon-map-marker"></span><span>越秀</span><span class="glyphicon glyphicon-time svg_img"></span><span>刚刚</span><span class="glyphicon glyphicon-folder-open svg_img"></span><span class="margin_svg" style="margin-left: 0.5rem">85220</span></div>
        <div class="align_left"><span class="left_span">兼职类型：</span><span class="right_span">其他</span></div>
        <div class="align_left"><span class="left_span">招聘人数：</span><span class="right_span">999人</span></div>
        <div class="align_left"><span class="left_span">性别要求：</span><span class="right_span">不限</span></div>
        <div class="littleInterval"></div>
        <div class="align_left"><span class="left_span">工作类型：</span><span class="right_span">钟点工</span></div>
        <div class="align_left"><span class="left_span">结算方式：</span><span class="right_span">纯工资结算</span></div>
        <div class="align_left"><span class="left_span">基本工资：</span><span class="right_span">200.00元/天</span></div>
        <div class="littleInterval"></div>
        <div class="detail_title">工作详情</div>
        <div style="padding-right: 1rem;">
          <div class="detail_list_div">
            <span>【内容】</span>
            <span>对客户产品进行售后回访，不推销产品，预计问卷10分钟左右</span>
          </div>
          <div class="detail_list_div">
            <span>【要求】</span>
            <span>年满16周岁，能工作一个月以上，每周排班24小时以上，善于沟通，普通话标准，有普通话证书优先录取</span>
          </div>
          <div class="detail_list_div">
            <span>【时间】</span>
            <span>每周排班24小时以上即可，可选任ABC班任一班次或者两个班次，A班:9:00-13:00，B班:13:00-18:00，C班:18:00-21:00</span>
          </div>
          <div class="detail_list_div">
            <span>【地点】</span>
            <span>广州市越秀区光塔路183号樱花大厦（地铁：一号线西门口站A出口）</span>
            </div>
        </div>
      </div>
      <mt-button type="default" size="large">我要报名</mt-button>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "JobMessage",
      data(){
          return {
            popupVisible:false,
          }
      },
      methods:{
          //显示下拉框
        showPopup(){
          this.popupVisible=!this.popupVisible;
        },
        collectJob(){
          this.popupVisible=false;
          Toast({
            message: '收藏成功',
            iconClass: 'icon icon-success'
          });
        },
        complaint(){
          this.popupVisible=false;
        },
        share(){
          this.popupVisible=false;
        }
      }
    }
</script>

<style scoped>
  .center{
    height: 85%;
    overflow: scroll;
  }
  .border_bottom{
    border-bottom: 1px solid;
    border-color: lightgrey;
    line-height: 3rem;
  }
  .popup{
    z-index: 999;
    position: absolute;
    right: 0;
    margin-right: 0.5rem;
    border:1px solid;
    width: 8rem;
    border-color: lightgrey;
  }
  .popup_none{
    z-index: 999;
    position: absolute;
    right: 0;
    margin-right: 0.5rem;
    border:1px solid;
    width: 8rem;
    border-color: lightgrey;
    display: none;
  }
  .detail_list_div{
    margin-left: 1rem;
    text-align: left;
    margin-bottom:1rem ;
  }
  .detail_title{
    text-align: left;
    line-height: 3rem;
    font-size: large;
    font-weight: bold;
    padding-left: 1rem;

  }
.title_span{
  font-size: large;
  font-weight: bold;
  text-align: left;
  line-height: 3rem;
  margin-left: 1rem;
}
  .align_left{
    text-align: left;
    font-size: larger;
    margin-top: 0.5rem;
  }
  .left_span{
    margin-left: 1rem;
    color: gray;
  }
.right_span{
  margin-left: 1rem;
}
.span_price{
  margin-left: 1rem;
  color: #ff862a;
  font-size: 2.5rem;
  font-weight: bold;
}
  .price_div{
    text-align: left;
  }
  .unit{
    margin-left: 0.5rem;
  }
  .margin_svg{
    margin-left: 0.5rem;
  }
  .little span{
    color: gray;
  }
  .little{
    text-align: left;
    margin-left: 1rem;
  }
  .svg_img{
    margin-left: 0.5rem;
  }

</style>
